<template>
  <table class="MyTable">
    <thead>
      <tr>
        <th  v-for="(items) in title" :key="items.id">
      <slot :title="items.title"  name="head"></slot>
    </th>
    </tr>
    </thead>
    <tbody >
      <tr v-for="(items) in datas"  :key="items.id" >
      <slot  :items="items" name="body"></slot>
     </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'MyTable',
  props: {
    title:Array,
    datas:Array
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.MyTable{
  vertical-align: middle;
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}
th{
  background-color: rgb(245,244,246); 
  border-bottom: 2px solid #39c5bb;
}
</style>
